<!--  -->
<template>
  <div class="">
    <a-card class="search-wrapper">
      <div class="search-form-wrapper" ref="search">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="queryParam.id" allow-clear placeholder="订单号" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="queryParam.userId" allow-clear placeholder="用户ID" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
                <!-- <a-button type="primary" @click="sendHandler">发红包</a-button> -->
              </span>
            </a-col>
            <a-col style="text-align: right;">
              <a-button type="primary" @click="applyAmountHandler">申请红包额度</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card class="table-wrapper">
      <!-- <div class="box">
        <div class="box-act">
          <a-button type="primary" size="small" @click="sendHandler"> 发送红包 </a-button>
        </div>
      </div> -->
      <a-table
          :loading="tableLoading"
          :columns="
          userInfo.userType === 'admin'
            ? [
                ...columns,
                {
                  title: '操作',
                  // fixed: 'right',
                  scopedSlots: { customRender: 'action' },
                  dataIndex: 'action'
                  // width: 120
                }
              ]
            : columns
        "
          :pagination="pagination"
          @change="(e) => handle(e)"
          :data-source="tableData"
          :scroll="{ y: tableHeight }"
      >
        <span slot="level" slot-scope="text">
          {{ text == '0' ? '否' : '是' }}
        </span>
        <span slot="action" slot-scope="text, record" v-if="record.status !== '1'">
          <a-button type="link" @click="auditHandler(record, 'pass')">审核通过</a-button>
          <a-button type="link" @click="auditHandler(record, 'reject')">审核驳回</a-button>
          <!-- <a-button type="link" @click="$refs.videoForm.open(record, 'info')">详情</a-button> -->
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { delRole, fetchRoleAction } from '@/api/system'
import {rewardHbList, shortMemberList, rewardHbAudit, rewardHbApply, shortUserDetail} from '@/api/short'
import { mapState } from 'vuex'
const columns = [
  {
    title: '订单号',
    dataIndex: 'id'
  },
  // {
  //   title: '订单类型',
  //   dataIndex: 'orderType'
  // },
  {
    title: '用户ID',
    dataIndex: 'userId'
  },
  {
    title: '红包数额',
    dataIndex: 'amount'
  },
  {
    title: '业务员编号',
    dataIndex: 'saleId'
  },
  // {
  //   title: '支付状态',
  //   dataIndex: 'statusDesc'
  //   customRender: (text) => (text === '1' ? '审核通过' : text === '2' ? '待审核' : '审核驳回')
  // },
  {
    title: '发放时间',
    dataIndex: 'createTime'
  },
  {
    title: '状态',
    dataIndex: 'statusDesc'
    // customRender:
  },
  // {
  //   title: '操作',
  //   dataIndex: 'action',
  //   scopedSlots: { customRender: 'action' }
  // }
]
export default {
  data() {
    return {
      // userInfo: {},
      visible: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      advanced: false,
      queryParam: {
        pageSize: 10,
        pageNum: 1
      },
      tabbarHeight: 420,
      columns,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    tableHeight() {
      return document.body.clientHeight - 220
    },
    ...mapState({
      userInfo: (state) => state.user.info
    })
  },
  mounted() {
    this.loadData()

    shortUserDetail(1049).then(res => {
      console.log(res)
    })
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  // activated() {
  //   this.loadData()
  // },
  // mounted() {
  //   this.loadData()
  // },
  methods: {
    applyAmountHandler() {
      let amount = ''
      let vm = this
      this.$confirm({
        title: '申请额度',
        width: 416,
        content: (
            <div>
              <a-input
                  placeholder="请输入"
                  allow-clear
                  type="number"
                  onChange={(e) => (amount = e.target.value)}
              ></a-input>
            </div>
        ),
        class: 'confirm-box',
        onOk() {
          return new Promise((resolve, reject) => {
            if (!amount) {
              vm.$message['error']('请输入申请额度')
              return reject(new Error('请输入申请额度'))
            } else {
              rewardHbApply({ money: amount })
                  .then((resp) => {
                    vm.$notification['success']({
                      message: '成功提示',
                      description: `提交成功`
                    })
                    // vm.selectedRowKeys = []
                    // vm.selectedRows = []
                    vm.handle()
                    resolve()
                  })
                  .catch(() => {
                    return reject(new Error(''))
                  })
            }
          })
        }
      })
    },
    batchHandler(status) {
      if (this.selectedRowKeys.length) {
        const ids = this.selectedRows.map((v) => v.id)
        this.auditHandler({ ids }, status)
      } else {
        this.$notification['error']({
          message: '错误提示',
          description: status == 'pass' ? '请选择批量审核通过数据' : '请选择批量审核驳回数据'
        })
      }
    },
    auditHandler(record, status) {
      const vm = this
      let remark = ''
      this.$confirm({
        title: status === 'pass' ? '审核通过' : '审核驳回',
        width: status === 'pass' ? 416 : 540,
        content: (
            <div>
              {status === 'reject' ? (
                  <div>
                    <p>确认审核驳回，请填写驳回原因：</p>
                    <a-textarea
                        placeholder="请输入"
                        allow-clear
                        auto-size={{ minRows: 3, maxRows: 8 }}
                        onChange={(e) => (remark = e.target.value)}
                    ></a-textarea>
                  </div>
              ) : (
                  <p>确认投资项目审核通过？</p>
              )}
            </div>
        ),
        class: 'confirm-box',
        onOk() {
          return new Promise((resolve, reject) => {
            if (status === 'reject' && !remark) {
              vm.$message['error']('请填写驳回原因')
              return reject(new Error('请填写驳回原因'))
            } else {
              rewardHbAudit({ auditResult: status === 'pass'?"1":"2",id: record.id, auditReason: remark }, status)
                  .then((resp) => {
                    vm.$notification['success']({
                      message: '成功提示',
                      description: `${status === 'pass' ? '审核通过' : '审核驳回'}成功`
                    })
                    // vm.selectedRowKeys = []
                    // vm.selectedRows = []
                    vm.handle()
                    resolve()
                  })
                  .catch(() => {
                    return reject(new Error(''))
                  })
            }
          })
        }
      })
    },
    loadUser() {
      shortMemberList().then(res => {

      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    batchCheck(record, message) {
      if (!this.selectedRowKeys.length) {
        this.$notification['error']({
          message: '错误提示',
          description: `请选择${message}数据`
        })
      } else if (record.status == 'del') {
        this.del({})
      } else {
        this.onChangeStatus(record)
      }
    },
    onChangeStatus(record, value) {
      const vm = this
      let idList = []
      if (record.id) {
        idList = [record.id]
      } else {
        idList = this.selectedRows.map((v) => v.id)
      }
      const type = record.status == 1 ? 'disable' : 'able'
      console.log(record, value, idList, 'record, value')
      this.$confirm({
        title: record.status == 1 ? '禁用会员' : '启用会员',
        content: (
            <div>
              {record.status == '1' ? (
                  <p>
                    <span style="color:#FF4E4E">会员禁用后，将无法使用</span>，你还要继续吗？
                  </p>
              ) : (
                  <p>确认启用该会员？</p>
              )}
            </div>
        ),
        class: 'confirm-box',
        onOk() {
          return new Promise((resolve, reject) => {
            fetchRoleAction({ idList }, type)
                .then(() => {
                  vm.$notification['success']({
                    message: '成功提示',
                    description: record.status == 1 ? '会员禁用成功' : '会员启用成功'
                  })
                  vm.loadData()
                  vm.selectedRowKeys = []
                  vm.selectedRows = []
                  resolve()
                })
                .catch(() => {
                  return reject(new Error(''))
                })
          })
        }
      })
    },
    loadData() {
      this.tableLoading = true
      rewardHbList({ ...this.queryParam })
          .then((res) => {
            this.tableLoading = false
            this.tableData = res.data.records
            this.pagination.total = res.data.total
          })
          .catch(() => {
            this.tableLoading = false
          })
    },
    handle(v) {
      if (v && v.current) {
        if (this.queryParam.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.queryParam.pageNum = v.current
        } else {
          this.queryParam.pageSize = v.pageSize
          this.queryParam.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.queryParam.pageNum = 1
        this.pagination.current = 1
        this.queryParam.pageSize = 10
      }
      this.loadData()
    },
    setVideoHandler() {},
    importHandler() {
      this.$refs.importExcel.showModal()
    },
    // addHandler() {
    //   this.$refs.videoForm.open()
    // },
    // editHandler(info) {
    //   this.$refs.videoForm.open(info)
    // },
    del(record) {
      let idList = []
      if (record.id) {
        idList = [record.id]
      } else {
        idList = this.selectedRows.map((v) => v.id)
      }
      const vm = this
      this.$confirm({
        title: '删除会员',
        content: (
            <div>
              {
                <p>
                  <span style="color:#FF4E4E">会员删除后，将无法使用</span>，你还要继续吗？
                </p>
              }
            </div>
        ),
        onOk() {
          return new Promise((resolve, reject) => {
            delRole({ idList })
                .then(() => {
                  vm.$notification['success']({
                    message: '提示',
                    description: '删除成功'
                  })
                  vm.loadData()
                  vm.selectedRowKeys = []
                  vm.selectedRows = []
                  resolve()
                })
                .catch(() => {
                  return reject(new Error(''))
                })
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
